<div class="timeline-view-settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b>Timelines</b>
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>
        <div class="inline-drawer-content">
            <div class="timeline-view-settings_block flex-container">
                <label for="tl_hover_tooltip_fixed" title="Always show the node tooltip at the bottom left of the timeline view. When off, show it near the node." data-i18n="[title]Always show the node tooltip at the bottom left of the timeline view. When off, show it near the node.">Fixed Position for Tooltip</label>
                <input id="tl_hover_tooltip_fixed" type="checkbox" />
            </div>
            <div class="timeline-view-settings_block flex-container">
                <label for="tl_tooltip_fixed" title="Always show the node full info panel at the bottom left of the timeline view. When off, show it near the node." data-i18n="[title]Always show the node full info panel at the bottom left of the timeline view. When off, show it near the node.">Fixed Position for Full Info Panel</label>
                <input id="tl_tooltip_fixed" type="checkbox" />
            </div>
            <div class="timeline-view-settings_block flex-container">
                <label for="tl_gpu_acceleration" title="Use GPU acceleration for positioning the full info panel that appears when you click a node. If the tooltip arrow tends to disappear, turning this off may help." data-i18n="[title]Use GPU acceleration for positioning the full info panel that appears when you click a node. If the tooltip arrow tends to disappear, turning this off may help.">GPU Accelerated Full Info Panel</label>
                <input id="tl_gpu_acceleration" type="checkbox" />
            </div>
            <div class="timeline-view-settings_block flex-container">
                <input value="Style Settings" class="menu_button" type="submit" id="toggleStyleSettings" title="Settings for the visual appearance of the Timelines graph." data-i18n="[title]Settings for the visual appearance of the Timelines graph.">
            </div>
            <!-- The collapsible style settings section -->
            <div id="styleSettingsArea" class="hidden">
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_use_chat_colors" title="Use the colors of the ST GUI theme, instead of the colors configured in Color Settings specifically for this extension." data-i18n="[title]Use the colors of the ST GUI theme, instead of the colors configured in Color Settings specifically for this extension.">Use UI Theme</label>
                    <input id="tl_use_chat_colors" type="checkbox" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_show_legend" title="Show a legend for colors corresponding to different characters and chat checkpoints." data-i18n="[title]Show a legend for colors corresponding to different characters and chat checkpoints.">Show Legend</label>
                    <input id="tl_show_legend" type="checkbox" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_auto_expand_swipes" title="Expand swipe nodes when the timeline view first opens, and whenever the graph is refreshed. When off, you can expand them by long-pressing a node, or by pressing the Toggle Swipes button." data-i18n="[title]Expand swipe nodes when the timeline view first opens, and whenever the graph is refreshed. When off, you can expand them by long-pressing a node, or by pressing the Toggle Swipes button.">Auto-expand Swipe Nodes</label>
                    <input id="tl_auto_expand_swipes" type="checkbox" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_swipe_scale" title="When enabled, nodes that have swipes splitting off of them will appear subtly larger, in addition to having the double border." data-i18n="[title]When enabled, nodes that have swipes splitting off of them will appear subtly larger, in addition to having the double border.">Scale Swipe Parent Nodes</label>
                    <input id="tl_swipe_scale" type="checkbox" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_avatar_as_root" title="Show the AI character's avatar as the graph root node. When off, the root node is blank." data-i18n="[title]Show the AI character's avatar as the graph root node. When off, the root node is blank.">Avatar As Root Node</label>
                    <input id="tl_avatar_as_root" type="checkbox" />
                </div>
                <!-- DANGER Will Robinson: `onInputChange` in `index.js` depends on some specific things here to update the Timelines settings GUI correctly:

                   - The specific element IDs for the zoom settings trigger special handling; this is a group of five settings with non-trivial logic between them.
                   - The 'floatingpoint' class disables integer rounding for displaying the value of a setting.
                -->
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_zoom_current_chat">Zoom level when zooming to current chat (<span id="tl_zoom_current_chat_value"></span>)</label>
                    <input id="tl_zoom_current_chat" type="range" class="floatingpoint" min="0.1" max="10.0" step="0.1" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <input id="tl_zoom_min_cb" type="checkbox" />
                    <label for="tl_zoom_min">Minimum zoom level (<span id="tl_zoom_min_value"></span>)</label>
                    <input id="tl_zoom_min" type="range" class="floatingpoint" min="0.1" max="10.0" step="0.1" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <input id="tl_zoom_max_cb" type="checkbox" />
                    <label for="tl_zoom_max">Maximum zoom level (<span id="tl_zoom_max_value"></span>)</label>
                    <input id="tl_zoom_max" type="range" class="floatingpoint" min="0.1" max="10.0" step="0.1" />
                </div>
                <small>
                    All sizes are specified in pixels at zoom level 1.0. The size set here multiplied by the zoom level is the final on-screen size. <!-- See <a href="https://js.cytoscape.org/">Cytoscape documentation</a> for the exact meanings of the settings. -->
                </small>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_node_width" title="Width of a node, in pixels at zoom level 1.0." data-i18n="[title]Width of a node, in pixels at zoom level 1.0.">Node Width (<span id="tl_node_width_value"></span>)</label>
                    <input id="tl_node_width" type="range" min="1" max="100" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_node_height" title="Height of a node, in pixels at zoom level 1.0." data-i18n="[title]Height of a node, in pixels at zoom level 1.0.">Node Height (<span id="tl_node_height_value"></span>)</label>
                    <input id="tl_node_height" type="range" min="1" max="100" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_node_separation" title="Separation between adjacent nodes in the same rank." data-i18n="[title]Separation between adjacent nodes in the same rank.">Node Separation (<span id="tl_node_separation_value"></span>)</label>
                    <input id="tl_node_separation" type="range" min="1" max="100" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_edge_separation" title="Separation between adjacent edges in the same rank." data-i18n="[title]Separation between adjacent edges in the same rank.">Edge Separation (<span id="tl_edge_separation_value"></span>)</label>
                    <input id="tl_edge_separation" type="range" min="1" max="100" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_rank_separation" title="Separation between each rank in the layout." data-i18n="[title]Separation between each rank in the layout.">Rank Separation (<span id="tl_rank_separation_value"></span>)</label>
                    <input id="tl_rank_separation" type="range" min="1" max="100" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_spacing_factor" title="A multiplicative factor to expand the overall area that the nodes take up." data-i18n="[title]A multiplicative factor to expand the overall area that the nodes take up.">Spacing Factor (<span id="tl_spacing_factor_value"></span>)</label>
                    <input id="tl_spacing_factor" type="range" min="1" max="100" />
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_node_ranker" title="How the automatic graph builder assigns a rank (layout depth) to graph nodes." data-i18n="[title]How the automatic graph builder assigns a rank (layout depth) to graph nodes.">Node Ranking Algorithm</label>
                    <select id="tl_node_ranker">
                        <option value="tight-tree">Tight Tree</option>
                        <option value="network-simplex">Network Simplex</option>
                        <option value="longest-path">Longest Path</option>
                    </select>
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_node_shape" title="The visual appearance of a node in the graph." data-i18n="[title]The visual appearance of a node in the graph.">Node Shape</label>
                    <select id="tl_node_shape">
                        <option value="ellipse">Ellipse</option>
                        <option value="triangle">Triangle</option>
                        <option value="round-triangle">Round-Triangle</option>
                        <option value="rectangle">Rectangle</option>
                        <option value="round-rectangle">Round-Rectangle</option>
                        <option value="bottom-round-rectangle">Bottom-Round-Rectangle</option>
                        <option value="cut-rectangle">Cut-Rectangle</option>
                        <option value="barrel">Barrel</option>
                        <option value="rhomboid">Rhomboid</option>
                        <option value="right-rhomboid">Right-Rhomboid</option>
                        <option value="diamond">Diamond</option>
                        <option value="round-diamond">Round-Diamond</option>
                        <option value="pentagon">Pentagon</option>
                        <option value="round-pentagon">Round-Pentagon</option>
                        <option value="hexagon">Hexagon</option>
                        <option value="round-hexagon">Round-Hexagon</option>
                        <option value="concave-hexagon">Concave-Hexagon</option>
                        <option value="heptagon">Heptagon</option>
                        <option value="round-heptagon">Round-Heptagon</option>
                        <option value="octagon">Octagon</option>
                        <option value="round-octagon">Round-Octagon</option>
                        <option value="star">Star</option>
                        <option value="tag">Tag</option>
                        <option value="round-tag">Round-Tag</option>
                        <option value="vee">Vee</option>
                    </select>
                </div>

                <div class="timeline-view-settings_block flex-container">
                    <label for="tl_curve_style" title="Style and routing of graph edges." data-i18n="[title]Style and routing of graph edges.">Curve Style</label>
                    <select id="tl_curve_style">
                        <option value="haystack">Haystack</option>
                        <option value="straight">Straight</option>
                        <option value="straight-triangle">Straight-Triangle</option>
                        <option value="bezier">Bezier</option>
                        <option value="unbundled-bezier">Unbundled-Bezier</option>
                        <option value="segments">Segments</option>
                        <option value="taxi">Taxi</option>
                    </select>
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <!-- Whatever that means. The phrase comes from the Cytoscape-Dagre README:
                           https://github.com/cytoscape/cytoscape.js-dagre
                           https://js.cytoscape.org/#layouts
                    -->
                    <label for="tl_align" title="Alignment for rank nodes." data-i18n="[title]Alignment for rank nodes.">Alignment</label>
                    <select id="tl_align">
                        <option value="UL">Upper Left</option>
                        <option value="UR">Upper Right</option>
                        <option value="DL">Down Left</option>
                        <option value="DR">Down Right</option>
                    </select>
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <input value="Reset Settings" class="menu_button" type="submit" id="resetSettingsBtn" title="Reset all Timelines settings to their default values." data-i18n="[title]Reset all Timelines settings to their default values.">
                </div>
            </div>
            <div class="timeline-view-settings_block flex-container">
                <input value="Color Settings" class="menu_button" type="submit" id="toggleColorSettings" title="Color configuration for Timelines when 'Use UI Theme' in Style Settings is off." data-i18n="[title]Color configuration for Timelines when 'Use UI Theme' in Style Settings is off.">
            </div>
            <div id="colorSettingsArea" class="hidden">
                <div class="timeline-view-settings_block flex-container">
                    <toolcool-color-picker id="bookmark-color-picker" value="#ff0000"></toolcool-color-picker>
                    <span data-i18n="Checkpoint Color">Checkpoint Node Border Color</span>
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <toolcool-color-picker id="char-node-color-picker" value="#FFFFFF"></toolcool-color-picker>
                    <span data-i18n="Character Node Color">Character Node Color</span>
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <toolcool-color-picker id="user-node-color-picker" value="#ADD8E6"></toolcool-color-picker>
                    <span data-i18n="User Node Color">User Node Color</span>
                </div>
                <div class="timeline-view-settings_block flex-container">
                    <toolcool-color-picker id="edge-color-picker" value="#555"></toolcool-color-picker>
                    <span data-i18n="Edge Color">Edge Color</span>
                </div>
            </div>
            <div class="timeline-view-settings_block flex-container">
                <input id="show_timeline_view" class="menu_button" type="submit" value="Show Timeline" title="Open the timeline view. Same as the slash command '/tl'." data-i18n="[title]Open the timeline view. Same as the slash command '/tl'." />
            </div>
            <!-- The Modal -->
            <div class="timelines-modal-storage hidden">  <!-- A place in the DOM to store the modal when not in use -->
                <div id="timelinesModal" class="modal">  <!-- The transparent outer modal, covering the whole viewport -->
                    <div id="networkContainer">  <!-- The inner modal, i.e. the actual content -->
                        <button class="close fa-solid fa-x" title="Close"></button>
                        <button class="rotate fa-solid fa-rotate-right" title="Rotate Graph"></button>
                        <button class="expand fa-solid fa-expand" title="Toggle Expand Swipes"></button>
                        <button class="reload fa-solid fa-sync" title="Reload Graph [/tl r]"></button>
                        <button class="zoomtofit fa-solid fa-magnifying-glass-plus" title="Zoom to Fit"></button>
                        <button class="zoomtocurrent fa-solid fa-magnifying-glass-location" title="Zoom to Current Chat"></button>
                        <input id="transparent-search" type="text" placeholder="Search [Ctrl+Shift+F]..." />
                        <div class="graph-container">
                            <!-- Relative positioned container -->
                            <div id="timelinesDiagramDiv"></div>
                            <div id="legendDiv" class="legend-bottom-right"></div>
                            <div id="fixedReference" style="position: fixed; bottom: 0; left: 0; width: 0; height: 0;"></div>
                            <!-- Legend with absolute positioning -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
